{extends file="./link.tpl"}
{block name=head}
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<style type="text/css" title="currentStyle">
	  @import "media2/css/demo_page.css";
		@import "media2/css/demo_table.css";
		@import "media2/css/themes/base/jquery-ui.css";
		@import "media2/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
  </style>

  <script src="media2/js/jquery-1.4.4.min.js" type="text/javascript"></script>
  <script src="media2/js/jquery.dataTables.min.js" type="text/javascript"></script>
  <script src="media2/js/jquery-ui.js" type="text/javascript"></script>
  <script src="media2/js/jquery.dataTables.columnFilter.js" type="text/javascript"></script>

	<script type="text/javascript">
    $(document).ready(function () {
      $('#example').dataTable().columnFilter({ sPlaceHolder: "head:after",
        aoColumns: 
        [
          { type: "text" },
          { type: "text" },
          { type: "text" },
          { type: "text" },
          { type: "text" }
        ]
      });
      var oTable = $('#example').dataTable();
      // Sort immediately with column 3 (at position 2 in the array. More could be sorted with additional array elements
      oTable.fnSort( [ [2,'asc'] ] );
    });
  </script>
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-17838786-4']);
    _gaq.push(['_trackPageview']);
    (function () 
    {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  </script>
  <script type="text/javascript">
    // start set value of loanDetailRowtext box
    function setLoanDetailRow(obj2, loanDetailRow1)
    {
      var loanDetailRow2 = obj2.value;
      var loanDetailRow  = loanDetailRow1 * loanDetailRow2 ;
      $(obj2).next('input:text').val(loanDetailRow);	
//      if((obj2) != "" && (obj2) != 0)
//      {
//        $('.myChk').attr('checked','checked');
//      }
    }
    // end set value of loanDetailRowtext box
    // start set value of installmentReceived text box
    function setInstallReciived(obj1)
    {
      if(obj1.checked == true)
    	{
    	  var loanDetailRow1 = obj1.value;
    	  var chid = obj1.id;
    	  $("#installmentReceived"+chid).val('1');
          $("#installmentReceived"+chid).next('input:text').val(loanDetailRow1);
    	}
    	else
    	{
          var chid=obj1.id;
    	  $("#installmentReceived"+chid).val("");
    	}
    }
    // end set value of installmentReceived text box
    </script>
  {/block}
  {block name=body}
	<body id="dt_example">
	  <div id="container">
		  <div id="demo">
		  	<form name="installmentReceivedForm" action="loanDetail2.php" method="post">
	      <table id="example" class="display" align="center">
	        <thead>
	          <tr>
	            <th>Last Installment</th>
	            <th>Loan Name</th>
	            <th>No</th>
	            <th>Installment<br />Received</th>
	            <th>Installment</th>
	            <th>Received</th>
	          </tr>
	          <tr>
	            <th>Last Installment</th>
	            <th>Loan Name</th>
	            <th>No</th>
	            <th>Installment<br />Received</th>
	            <th>Installment</th>
	            <td align="center"><input type="submit" name="sub" id="sub" value="S A V E"></td>
	          </tr>
	        </thead>
	        <tbody> 
	          {section name=m loop=$loanDetailRow}
						  <tr>
							  <td align="center">{$loanDetailRow[m]['lastInstallmentDate']|date_format:"%d-%m-%Y"}</td>
								<td align="center">{$loanDetailRow[m]['partyName']}</td>
								<td align="center">{$loanDetailRow[m]['loanId']}</td>
								<td align="center">{$loanDetailRow[m]['installmentReceived']}</td>
								<td align="center">{$loanDetailRow[m]['installmentAmount']}</td>
								<td align="center" NOWRAP>
								  <input type="checkbox" class="myChk" id="{$loanDetailRow[m]['loanId']}" value="{$loanDetailRow[m]['installmentAmount']}" onclick="setInstallReciived(this);"/>
								  <input type="text" size="5" id="installmentReceived{$loanDetailRow[m]['loanId']}" name="installmentReceived[{$loanDetailRow[m]['loanId']}]" onkeyup="setLoanDetailRow(this,{$loanDetailRow[m]['installmentAmount']});"  value="0" />
								  <input type="text" size="5" readonly id="amountReceived{$loanDetailRow[m]['loanId']}" name="amountReceived[{$loanDetailRow[m]['loanId']}]"  />
								</td>
						  </tr>
						{/section}
	        </tbody>
	        <tfoot>
	          <tr>
	            <th>Last Installment</th>
	            <th>Loan Name</th>
	            <th>No</th>
	            <th>Installment<br />Received</th>
	            <th>Installment</th>
	            <th>Received</th>
	          </tr>
	        </tfoot>
	      </table>
	      <table align="center" border="1">
    	  	<tr>
    	      <td><input type="submit" name="sub" id="sub" value="S A V E"></td>
    	    </tr>
    	  </table>
			</div>
			<div class="spacer"></div>
		</div>
	</form>
</body>
{/block}
